<template>
    <div class="createPost-container">
        <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
            <div class="createPost-main-container" style="margin-top: 20px;">

                <el-form-item label="用户名" label-width="90px" class="postInfo-container-item">
                    {{postForm.username}}
                </el-form-item>

                <el-form-item label="原密码" prop="oldPassword" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.oldPassword" show-password @input="change" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="新密码" prop="password" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.password" show-password @input="change" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="重复密码" prop="password2" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.password2" show-password @input="change" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="mobile" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.mobile" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email" label-width="90px" class="postInfo-container-item">
                    <el-input v-model="postForm.email" style="width: 300px;"></el-input>
                </el-form-item>

                <el-form-item label-width="90px" label="类型" class="postInfo-container-item">
                    <el-select v-model="postForm.user_type" disabled
                               filterable default-first-option>
                        <el-option v-for="(item,index) in typeOptions" :key="item.type" :label="item.lable" :value="item.type" />
                    </el-select>
                </el-form-item>

                <el-form-item label-width="90px">
                    <el-button type="success" :disabled="loading" @click="submitForm">确认修改</el-button>
                    <el-button type="primary" @click="goBack">返回</el-button>
                </el-form-item>

            </div>
        </el-form>
    </div>
</template>

<script>

    export default {
        name: 'userUpdate',
        data() {
            return {
                postForm: {
                    admin_id: '',
                    oldPassword: '',
                    password: '',
                    mobile: '',
                    email: '',
                    user_type: '',
                },
                loading: false,
                typeOptions: [{type:1, lable:"管理员"}, {type:2, lable:"普通用户"}],
                rules: {
                    oldPassword: [
                        { required: true, message: '请输入原密码', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' },
                        { type: 'string', max: 20, message: '密码最多20位', trigger: 'blur' }
                    ],
                    password2: [
                        { required: true, message: '请重复新密码', trigger: 'blur' }
                    ],
                },
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            fetchData() {
                this.$adminApi.auth_me().then(response => {
                    this.postForm = response.data
                    this.postForm.oldPassword = '';
                    this.postForm.password = '';
                    this.postForm.password2 = '';
                }).catch(err => {
                    console.log(err)
                })
            },
            submitForm() {
                this.$refs.postForm.validate(valid => {
                    if (valid) {
                        if (this.postForm.oldPassword != this.postForm.password) {
                            new Error("两次输入密码不一致!");
                        }
                        this.loading = true
                        this.$adminApi.admin_edit({
                            admin_id:this.postForm.admin_id,
                            oldPassword:this.postForm.oldPassword,
                            password:this.postForm.password,
                            mobile:this.postForm.mobile,
                            email:this.postForm.email,
                        }).then(response => {
                            this.$notify({
                                title: '成功',
                                message: '添加用户成功',
                                type: 'success',
                                duration: 2000
                            })
                            if (!response.code) {
                                this.$router.push({
                                    name: 'logout',
                                    params: {  }
                                })
                            }
                            this.loading = false
                        }).catch((e)=>{
                            this.loading = false
                        })
                    }
                })
            },
            change(e){
                this.$forceUpdate()
            },
            goBack() {
                this.$router.go(-1)
            },
        }
    }
</script>
